<!DOCTYPE html>
<html>
<head>
  <title>circle</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <style type="text/css">
    body{
      margin: 0;
    }
    #container{
      height: 100vh;
      width: 100vw;
    }
    #canvas{
      background-color: #fad7d7;
    }
  </style>
</head>
<body>
<div id="container">
  <canvas id="canvas"></canvas>
</div>
<script type="text/javascript" src="./lib/weRender.min.js"></script>
<script type="text/javascript">
  var WeStage = weRender.WeStage;
  var WeCanvas = weRender.WeCanvas;

  var stage = new WeStage(document.querySelector("#canvas"));
  stage.setSize(500, 500);
  stage.setStyle("500px", "500px");

  var width = 30, height = 30;

  var circle = new WeCanvas({
    width: width,
    height: height,
  })
  .beginPath()
  .fillStyle("red")
  .arc(15, 15, 10, 0, 2 * Math.PI)
  .fill()
  .draw();

  var maxRow = Math.floor(500 / height);
  var maxCol = Math.floor(500 / width);

  for (var row = 0; row < maxRow; row ++){
    for (var col = 0; col < maxCol; col ++) {
      stage.addChild({
        canvas: circle.canvas,
        x: col * width + 10,
        y: row * height + 10
      })
    }
  }

  stage.update();

</script>
</body>
</html>
